<template>
  <div class="c_policy_list">
    <!-- banner -->
    <div class="banner">
      <img src="../../assets/images/banner.png" alt />
    </div>
    <div class="white">
      <div class="box">
        <div class="location">
          <router-link to="/policy" class="fl">{{$t('common.nav.policy')}}</router-link>
          <span class="sp">></span>
          <span v-if="tabStatus=='policySending'">{{$t('common.policy.publication')}}</span>
          <span v-if="tabStatus=='policyDecode'">{{$t('common.policy.analyzing')}}</span>
          <span v-if="tabStatus=='policyDeclare'">{{$t('common.leftNav.policy')}}</span>
          <!-- <span v-if="tabStatus=='policyRecommend'">{{$t('common.policy.match')}}</span> -->
          <span v-if="tabStatus=='policyCash'">{{$t('common.policy.fulfillment')}}</span>
        </div>

        <div class="box-content">
          <div class="nav">
              <dl>
                <dt>— 创新政策</dt>
                <dd :class="{'active':tabStatus=='policySending'}" @click="changeType('policySending')">政策发文</dd>
                <dd :class="{'active':tabStatus=='policyDecode'}" @click="changeType('policyDecode')">政策解读</dd>
              </dl>
              <dl>
                <dt>— 政策申报兑现</dt>
                <dd :class="{'active':tabStatus=='policyDeclare'}" @click="changeType('policyDeclare')">政策申报</dd>
                <!-- <dd :class="{'active':tabStatus=='policyRecommend'}" @click="changeType('policyRecommend')">政策匹配</dd> -->
                <dd :class="{'active':tabStatus=='policyCash'}" @click="changeType('policyCash')">政策兑现</dd>
              </dl>
          </div>
          <div class="box-list">
            <template v-if="pagination.total>0">
              <!--政策发文-->
              <ul class="ul" v-if="tabStatus=='policySending'">
                <li>
                    <p>
                      <i class="first"></i>
                      <a href="javascript:void(0)">政策发文</a>
                    </p>
                </li>
                <li v-for="(item, index) in policySendingList" :key="index">
                  <p>
                    <i class="sec"></i>
                    <a href="javascript:void(0)" @click="navTo('/c_policy_detail?type=policySending&id='+item.id)">
                      {{item.title}}
                      <span class="newTag rd15" v-if="item.tagTxt && item.tag !=0">{{item.tagTxt}}</span>
                      
                    </a>
                  </p>
                  <span class="date" v-if="item.createTime">{{item.createTime}}</span>
                </li>
              </ul>
              <!--政策解读-->
              <ul class="ul" v-if="tabStatus=='policyDecode'">
                <li>
                    <p>
                      <i class="first"></i>
                      <a href="javascript:void(0)">政策解读</a>
                    </p>
                </li>
                <li v-for="(item, index) in policyDecodeList" :key="index">
                  <p>
                    <i class="sec"></i>
                    <a href="javascript:void(0)" @click="navTo('/c_policy_detail?type=policyDecode&id='+item.id)">
                      {{item.title}}
                      <span class="newTag rd15" v-if="item.recommendedTagTxt && item.recommendedTag !=0">{{item.recommendedTagTxt}}</span>
                    </a>
                  </p>
                  <span class="date" v-if="item.releaseTime">{{item.releaseTime}}</span>
                </li>
              </ul>
              <!--政策申报-->
              <ul class="ul" v-if="tabStatus=='policyDeclare'">
                <li>
                    <p>
                      <i class="first"></i>
                      <a href="javascript:void(0)">政策申报</a>
                    </p>
                </li>
                <li v-for="(item, index) in policyDeclareList" :key="index">
                  <p>
                    <i class="sec"></i>
                    <a href="javascript:void(0)" @click="navToIsLogin(item)">{{item.title}}<span class="newTag rd15" v-if="item.recommendedTagTxt && item.recommendedTag !=0">{{item.recommendedTagTxt}}</span>
                      
                    </a>
                    <span class="status" :class="{'color1':item.applyStatus=='2','red0':item.applyStatus=='1'}">{{item.applyStatusTxt}}</span>
                  </p>
                  <span class="date tr" v-if="item.beginTime">{{item.beginTime.substr(0,10)}}</span>
                </li>
              </ul>
              <!--政策匹配-->
              <ul class="ul" v-if="tabStatus=='policyRecommend'">
                <li>
                    <p>
                      <i class="first"></i>
                      <a href="javascript:void(0)">政策匹配</a>
                    </p>
                </li>
                <li v-for="(item, index) in policySearchList" :key="index">
                  <p>
                    <i class="sec"></i>
                    <a href="javascript:void(0)">{{item.title}}</a>
                  </p>
                  <span class="date" v-if="item.createTime">{{item.createTime}}</span>
                </li>
              </ul>
              <!--政策兑现-->
              <ul class="ul" v-if="tabStatus=='policyCash'">
                <li>
                    <p>
                      <i class="first"></i>
                      <a href="javascript:void(0)">政策兑现</a>
                    </p>
                </li>
                <li v-for="(item, index) in policyCashList" :key="index">
                  <p>
                    <i class="sec"></i>
                    <a href="javascript:void(0)" @click="navTo('/c_policy_exchange?id='+item.id)">{{item.title}}</a>
                  </p>
                  <span class="date" v-if="item.createTime">{{item.createTime}}</span>
                </li>
              </ul>
            </template>
            <div class="noRecord" v-if="pagination.total==0">
              <img src="../../assets/images/tip.png">
              <p>{{$t('recruit.NoData')}}~</p>
            </div>

            <p class="record" v-if="pagination.total > 0">{{$t('recruit.Total')}}{{pagination.total}}{{$t('recruit.Records')}} {{$t('recruit.Only')}}{{pagination.current}}/{{Math.ceil(pagination.total/pagination.size) || 0}}{{$t('recruit.Page')}}</p>
            <div class="box-center" v-if="pagination.total > 0">
              <el-pagination background  @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current" :page-size="pagination.size" layout="prev, pager, next, jumper" :total="pagination.total"></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ajax, showToast, ajaxAdd, isLoginM,jumpRout,ajaxBackAdd } from "@/utils/js.js";
import {
  photoStyle,
  policyDecodeMore,
  policySendingMore,
  policyDeclareMore,
  policyCash,
  policySearchMore
} from "@/services/api.js";
export default {
  components: {},
  data() {
    return {
      dataShow:false,
      checked: true,
      tabStatus:"",
      policyDecodeList:[],
      policySendingList:[],
      policyDeclareList:[],
      policyCashList:[],
      policySearchList:[],
      query:{
        	"cashIn": "",
          "declarationId": "",
          "pageNo": 1,
          "pageSize": 10,
          "title": ""
        // status:true,
      },
      pagination:{
        current:0, 
        size:0,
        total:0,
      },
      isLogin:'false',
      isPerson:true,
    };
  },
  mounted() {
    if(this.$store.state.userInfo){
      this.isLogin='true';
      if(this.$store.state.userInfo.type==0){
        this.isPerson=true;
      }else{
        this.isPerson=false;
      }
    }
    this.tabStatus = this.$route.query.type;
    this.content(this.tabStatus);
  },
  computed: {},
  watch: {
    "$i18n.locale"() {
      this.content();
    },
  },
  methods: {
    content(type) {
       if(type=="policySending"){
          // 政策发文
          ajax( this,policySendingMore,this.query,(res) => {
              this.policySendingList = res.data.records;
              this.getPagination(res);
            },err=>{

            });
        }else if(type=="policyDecode"){
          // 政策解读 
          ajax(this,policyDecodeMore,this.query,(res) => {
              this.policyDecodeList = res.data.records;
              this.getPagination(res);
            },err=>{
              
            });

        }else if(type=="policyDeclare"){
          // 政策申报 
          ajax(
            this,
            policyDeclareMore,
            this.query,
            (res) => {
              this.policyDeclareList = res.data.records;
              this.getPagination(res);
            }
          );
        }else if(type=="policyRecommend"){
          this.policySearchList = [];
          this.getPagination();
        }else if(type=="policyCash"){
          //政策兑换 
          ajax(
            this,
            policyCash,
            this.query,
            (res) => {
              this.policyCashList = res.data.records;
              this.getPagination(res);
            }
          );
          // this.policyCashList = [];
          // this.getPagination(res);
        }
    },
    changeType(type){
        this.tabStatus=type;
        let query = this.$router.history.current.query;
        let path = this.$router.history.current.path;
        //对象的拷贝
        let newQuery = JSON.parse(JSON.stringify(query));
        // 地址栏的参数值赋值
        newQuery.type = type;
        this.$router.push({ path, query: newQuery });
        this.content(this.tabStatus);
    },
    navTo(url){
      jumpRout(this,url,{},(d)=>{})
    },
    
    navToIsLogin(e){
      isLoginM(this,()=>{
       // subjectType 申报主体:1个人,2企业
        let routeUrl
        if(e.subjectType == 1 ){
          routeUrl = this.$router.resolve({
           		path: 'c_policy_declare_person?type=policyDeclare&id='+e.id,
          });
        }else{
          routeUrl = this.$router.resolve({
           		path: 'c_policy_declare_detail?type=policyDeclare&id='+e.id,
          });
        }
        window.open(routeUrl.href, '_blank');
      })
    },
    getPagination(res){
      if(res.data){
        setTimeout(() => {
          this.query.pageNo=res.data.current;
          this.pagination={
            current:res.data.current,
            size:res.data.size,
            total:res.data.total,
          };
        }, 500)
      }else{
        setTimeout(() => {
          this.query.pageNo=1;
          this.pagination={
            current:1,
            size:10,
            total:0,
          };
        }, 500)
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.query.pageNo=val;
      this.content(this.tabStatus);
    },
  },
};
</script>
<style lang="scss">
.c_policy_list {
  .noRecord{
    text-align: center;
    padding:100px 0;
    p{
      font-size:16px;
      font-family:Microsoft YaHei;
      font-weight:400;
      margin-top: 30px;
      color:rgba(102,102,102,1);
      opacity:1;
    }
  }
  .box-center {
    margin: 30px auto 50px auto;
    text-align: center;
  }
  .record{
    padding: 8px 0;
    font-size:12px;
    font-family:Microsoft YaHei;
    font-weight:400;
    line-height:16px;
    color:rgba(153,153,153,1);
    opacity:1;
  }
  .banner {
    img {
      max-width: 100%;
      min-width: 1200px;
      display: block;
    }
    .el-carousel--button {
      width: 12px;
      height: 12px;
      background: rgba(255, 255, 255, 1);
      border-radius: 50%;
      opacity: 1;
    }
    .el-carousel--indicator.is-active button {
      background-color: #0f54bc;
    }
  }
  .noRecord {
    text-align: center;
    padding: 144px 0;
    border-top: 1px solid rgba(204, 204, 204, 1);
    p:first-child {
      text-align: center;
    }
    p:nth-child(2) {
      margin-top: 25px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      opacity: 1;
    }
    p:last-child {
      margin-top: 36px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(119, 119, 119, 1);
      opacity: 1;
      a {
        margin-left: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(15, 84, 188, 1);
        opacity: 1;
        text-decoration: underline;
      }
    }
  }
  .white {
    background: #fff;
  }
  .box {
    box-sizing: border-box;
    width: 1200px;
    margin: 0 auto;
    .breadcrumb-nav {
      font-size: 13px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      opacity: 1;
      margin: 8px 0;
    }
    .box-content {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      .nav {
        width: 106px;
        dl:first-child{
          margin-top:0px;
        }
        dl{
           margin-top:17px;
          dt{
            width: 240px;
            height:74px;
            background:rgba(15,84,188,1);
            opacity:1;
            font-size:24px;
            font-family:MicrosoftYaHei;
            line-height:74px;
            color:rgba(255,255,255,1);
            opacity:1;
            padding-left: 10px;
            box-sizing: border-box;
          }
          dd{
            margin-top: 10px;
            width:239px;
            height:55px;
            background:rgba(245,245,245,1);
            opacity:1;
            font-size:16px;
            padding-left: 40px;
            font-family:MicrosoftYaHei;
            line-height:55px;
            color:rgba(102,102,102,1);
            opacity:1;
            box-sizing: border-box;
            cursor: pointer;
            border-left:3px solid rgba(245,245,245,1);
          }
          dd.active,dd:hover{
            color:rgba(15,84,188,1);
            border-left-color: rgba(15,84,188,1);
          }
        }
      }
      .box-list {
        width: 903px;
        ul.ul{
          height: 500px;
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: flex-start;
          li:first-child{
            font-size:18px;
            color:rgba(51,51,51,1);
            line-height:44px;
            list-style: none;
            i.first{
              margin: 0 5px;
              align-self: center;
              display: block;
              width: 0px;
              height: 0px;
              content: "";
              border-left: 5px solid #0f54bc;
              border-top: 3px solid transparent;
              border-bottom: 3px solid transparent;
            }
          }
          li {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            border-bottom: 1px solid rgba(242,242,242,1);
            font-size:14px;
            font-family:MicrosoftYaHei;
            line-height:44px;
            color:rgba(128,128,128,1);
            list-style-type:disc!important;
            opacity:1;
            
            p {
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              justify-content: flex-start;
              width: calc(100% - 160px);
            }
            .status {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              opacity: 1;
            }
            .date {
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              opacity: 1;
              width: 120px;
            }
            
            i.sec {
              margin: 0 5px;
              width:4px;
              height:4px;
              background:rgba(205,205,205,1);
              border-radius:50%;
              opacity:1;
              align-self: center;
              display: block;
            }
            a {
              display: block;
              color: rgba(102, 102, 102, 1);
              text-decoration: none;
              width:80% !important;
              margin-right: 5%;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
            }
            a:hover {
              color: rgba(15, 84, 188, 1);
            }
          }
        }
      }
    }
  }
}
</style>